<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>turndown test runner</title>
  <link rel="stylesheet" href="../node_modules/turndown-attendant/dist/styles.css">
</head>
<body>

<!-- TEST CASES -->

<div class="case" data-name="strike">
  <div class="input"><strike>Lorem ipsum</strike></div>
  <pre class="expected">~~Lorem ipsum~~</pre>
</div>

<div class="case" data-name="s">
  <div class="input"><s>Lorem ipsum</s></div>
  <pre class="expected">~~Lorem ipsum~~</pre>
</div>

<div class="case" data-name="del">
  <div class="input"><del>Lorem ipsum</del></div>
  <pre class="expected">~~Lorem ipsum~~</pre>
</div>

<div class="case" data-name="unchecked inputs">
  <div class="input"><ul><li><input type=checkbox>Check Me!</li></ul></div>
  <pre class="expected">*   [ ] Check Me!</pre>
</div>

<div class="case" data-name="checked inputs">
  <div class="input"><ul><li><input type=checkbox checked>Checked!</li></ul></div>
  <pre class="expected">*   [x] Checked!</pre>
</div>

<div class="case" data-name="basic table">
  <div class="input">
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
        </tr>
      </tbody>
    </table>
  </div>
  <pre class="expected">| Column 1 | Column 2 |
| --- | --- |
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |</pre>
</div>

<div class="case" data-name="cell alignment">
  <div class="input">
    <table>
      <thead>
        <tr>
          <th align="left">Column 1</th>
          <th align="center">Column 2</th>
          <th align="right">Column 3</th>
          <th align="foo">Column 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td align="left">Row 1, Column 1</td>
          <td align="center">Row 1, Column 2</td>
          <td align="right">Row 1, Column 3</td>
          <td align="foo">Row 1, Column 4</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
          <td>Row 2, Column 4</td>
        </tr>
      </tbody>
    </table>
  </div>
  <pre class="expected">| Column 1 | Column 2 | Column 3 | Column 4 |
| :--- | :---: | ---: | --- |
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 | Row 1, Column 4 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 | Row 2, Column 4 |</pre>
</div>

<div class="case" data-name="empty cells">
  <div class="input">
    <table>
      <thead>
        <tr>
          <th align="left">Column 1</th>
          <th align="center">Column 2</th>
          <th align="right">Column 3</th>
          <th align="foo">Column 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
          <td>Row 1, Column 4</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td></td>
          <td>Row 2, Column 3</td>
          <td>Row 2, Column 4</td>
        </tr>
        <tr>
          <td>Row 3, Column 1</td>
          <td>Row 3, Column 2</td>
          <td></td>
          <td>Row 3, Column 4</td>
        </tr>
        <tr>
          <td>Row 4, Column 1</td>
          <td>Row 4, Column 2</td>
          <td>Row 4, Column 3</td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td>Row 5, Column 4</td>
        </tr>
      </tbody>
    </table>
</div>
<pre class="expected">| Column 1 | Column 2 | Column 3 | Column 4 |
| --- | --- | --- | --- |
|     | Row 1, Column 2 | Row 1, Column 3 | Row 1, Column 4 |
| Row 2, Column 1 |     | Row 2, Column 3 | Row 2, Column 4 |
| Row 3, Column 1 | Row 3, Column 2 |     | Row 3, Column 4 |
| Row 4, Column 1 | Row 4, Column 2 | Row 4, Column 3 |     |
|     |     |     | Row 5, Column 4 |</pre>
</div>

<div class="case" data-name="empty rows">
  <div class="input">
    <table>
      <thead>
        <td>Heading 1</td>
        <td>Heading 2</td>
      </thead>
      <tbody>
        <tr>
          <td>Row 1</td>
          <td>Row 1</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Row 3</td>
          <td>Row 3</td>
        </tr>
      </tbody>
    </table>
</div>
<pre class="expected">| Heading 1 | Heading 2 |
| --- | --- |
| Row 1 | Row 1 |
|     |     |
| Row 3 | Row 3 |</pre>
</div>

<div class="case" data-name="th in first row">
  <div class="input">
    <table>
      <tr>
        <th>Heading</th>
      </tr>
      <tr>
        <td>Content</td>
      </tr>
    </table>
  </div>
  <pre class="expected">| Heading |
| --- |
| Content |</pre>
</div>

<div class="case" data-name="th first row in tbody">
  <div class="input">
    <table>
      <tbody>
        <tr>
          <th>Heading</th>
        </tr>
        <tr>
          <td>Content</td>
        </tr>
      </tbody>
    </table>
  </div>
  <pre class="expected">| Heading |
| --- |
| Content |</pre>
</div>

<div class="case" data-name="table with two tbodies">
  <div class="input">
    <table>
      <tbody>
        <tr>
          <th>Heading</th>
        </tr>
        <tr>
          <td>Content</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <th>Heading</th>
        </tr>
        <tr>
          <td>Content</td>
        </tr>
      </tbody>
    </table>
  </div>
  <pre class="expected">| Heading |
| --- |
| Content |
| Heading |
| Content |</pre>
</div>

<div class="case" data-name="heading cells in both thead and tbody">
  <div class="input">
    <table>
      <thead><tr><th>Heading</th></tr></thead>
      <tbody><tr><th>Cell</th></tr></tbody>
    </table>
  </div>
  <pre class="expected">| Heading |
| --- |
| Cell |</pre>
</div>

<div class="case" data-name="empty head">
  <div class="input">
    <table>
      <thead><tr><th></th></tr></thead>
      <tbody><tr><th>Heading</th></tr></tbody>
    </table>
  </div>
  <pre class="expected">|     |
| --- |
| Heading |
| --- |</pre>
</div>

<div class="case" data-name="non-definitive heading row (converted but with empty header)">
  <div class="input">
    <table>
      <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
      <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
    </table>
  </div>
  <pre class="expected">|     |     |
| --- | --- |
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |</pre>
</div>

<div class="case" data-name="non-definitive heading row with th (converted but with empty header)">
  <div class="input">
    <table>
      <tr>
        <th>Heading</th>
        <td>Not a heading</td>
      </tr>
      <tr>
        <td>Heading</td>
        <td>Not a heading</td>
      </tr>
    </table>
  </div>
  <pre class="expected">|     |     |
| --- | --- |
| Heading | Not a heading |
| Heading | Not a heading |</pre>
</div>

<div class="case" data-name="highlighted code block with html">
  <div class="input">
    <div class="highlight highlight-text-html-basic">
      <pre>&lt;<span class="pl-ent">p</span>&gt;Hello world&lt;/<span class="pl-ent">p</span>&gt;</pre>
    </div>
  </div>
  <pre class="expected">```html
&lt;p&gt;Hello world&lt;/p&gt;
```</pre>
</div>

<div class="case" data-name="highlighted code block with js">
  <div class="input">
    <div class="highlight highlight-source-js">
      <pre>;(<span class="pl-k">function</span> () {})()</pre>
    </div>
  </div>
  <pre class="expected">```js
;(function () {})()
```</pre>
</div>

<!-- /TEST CASES -->

<script src="turndown-plugin-gfm-test.browser.js"></script>
</body>
</html>
